<template>
    <div>
        <el-dialog
            title="计算因子动态参数设置"
            :visible.sync="visible"
            :show-close="false"
            width="400px"
            :close-on-click-modal="false"
            append-to-body
        >
            <div class="main">
                <div v-for="(i, index) in paramGroup" :key="index">
                    <el-row> 参数{{ index }} :</el-row>
                    <el-row>
                        {{ i.paramNotes }}:
                        <el-input
                            v-if="i.paramType === '0'"
                            v-model="paramDatas[i.param]"
                            size="mini"
                            @change="changeInput"
                            :disabled="onlyLook"
                            clearable
                        >
                        </el-input
                        >{{ i.paramCompany }}
                        <el-select
                            v-if="i.paramType === '1'"
                            v-model="paramDatas[i.param]"
                            size="mini"
                            :disabled="onlyLook"
                            name="paramType1"
                            clearable
                        >
                            <el-option
                                v-for="item in i.dictionarys"
                                :key="item.dictKey"
                                :label="item.dictKeyName"
                                :value="item.dictKey"
                                :disabled="i.entryCalculateFactorCode === 'YH543'"
                                :name="'paramType1:' + item.dictKey"
                            ></el-option>
                        </el-select>
                        <el-date-picker
                            v-if="i.paramType === '2'"
                            value-format="yyyyMMdd"
                            v-model="paramDatas[i.param]"
                            size="mini"
                            :disabled="onlyLook"
                        ></el-date-picker>
                    </el-row>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button name="calcExtendCancel" @click="handelBtnClick('cancel')">取消</el-button>
                <el-button name="calcExtendConfirm" type="primary" @click="handelBtnClick('confirm')">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';

@Component({
    name: 'ItemCalcExtendModel',
    components: {},
})
export default class ItemCalcExtendModel extends Vue {
    @Prop() visible;
    @Prop() data;
    @Prop() res;
    @Prop() branchNum;
    @Prop() onlyLook;

    private paramDatas: any = {};

    @Watch('res', { immediate: true, deep: true })
    handleData(newdata) {
        console.log('==this.res', this.res);
        this.paramDatas = this.res;
    }

    get paramGroup() {
        return JSON.parse(JSON.stringify(this.data));
    }

    private changeInput(val: any): void {
        console.log(val, '??');
    }

    private handelBtnClick(type: string): void {
        if (type === 'cancel') {
            this.$emit('update:visible', false);
        }
        if (type === 'confirm') {
            console.log('==this.paramDatas', this.paramDatas);
            let param = this.paramDatas;
            let arr = [];
            for (const key in param) {
                let data = key + ':' + param[key];
                arr.push(data);
            }
            console.log('44444444455', arr.join(','));
            this.$emit('handleParam', arr.join(','), this.branchNum);
        }
    }
}
</script>
<style lang="scss" scoped>
.el-input {
    display: inline;
    /deep/ .el-input__inner {
        width: 223px;
    }
}
</style>
